<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="shortcut icon" href="QQ.ico"/>
</head>
<body>
<!--top     B-->
<div class="top">
    <div class="header">
        <img src="images/videoqq.png"/>
        <div class="more" id="more">
            <ul>
                <li><a href="javascript:void (0)">QQ官网首页</a></li>
                <li><a href="javascript:void (0)">产品下载</a></li>
                <li><a href="javascript:void (0)">QQ会员</a></li>
                <li><a href="javascript:void (0)">安全中心</a></li>
            </ul>
        </div>
        <div class="header_right fr">
            <ul>
                <li id="show"><a href="#">更多</a><img src="images/topmore.png" /></li>
                <li><a href="#">登录</a></li>
            </ul>
            <span class="fr"><a href="#">当前在线人数:2222,2222,222</a></span>
        </div>
    </div>


</div>
<!--top     E-->
<!--head    B-->
<div class="head">
    <div class="w980">
        <div class="download">
            <a href="#" class="download_text"></a>
        </div>
        <div class="pic">
            <img src="images/banner.png" />
        </div>
    </div>
</div>
<div>

</div>
<!--head    E-->
<!--content_1     B-->
<div class="content_1">
    <div class="bg">
        <div class="area">
            <div class="txt"></div>
            <div class="pic" id="pic_1"></div>
        </div>
    </div>
</div>
<!--content_1     E-->
<!--content_2     B-->
<div class="content_2">
    <div class="bg">
        <div class="area">
            <div class="txt"></div>
            <div class="pic" id="pic_2"></div>
        </div>
    </div>
</div>
<!--content_2     E-->
<!--content_3     B-->
<div class="content_3">
    <div class="bg">
        <div class="area">
            <div class="txt"></div>
            <div class="pic" id="pic_3"></div>
        </div>
    </div>
</div>
<!--content_2     E-->
<!--content_4     B-->
<div class="content_4">
    <div class="bg">
        <div class="area">
            <div class="txt"></div>
            <div class="pic" id="pic_4"></div>
        </div>
    </div>
</div>
<!--bottom  B-->
<div class="bottom">

        <span>Copyright &copy; 1998-2016 Tencent. All Rights Reserved.<br>腾讯公司 版权所有</span>


</div>
<!--bottom  E-->
<script src="js/common.js"></script>
<script src="js/animate.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script>
//找对象
    var pic_1 = my$("pic_1")
    var pic_2 = my$("pic_2")
    var pic_3 = my$("pic_3")
    var pic_4 = my$("pic_4")
//    var show = my$("show")
//    var more = my$("more")


    function getScroll() {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
        return {
            scrollTop: scrollTop,
            scrollLeft : scrollLeft
        };
    }
//注册事件
    $(function () {
        $("#show").mouseenter(function () {
            $("#more").stop().slideDown()
        })
        $("#show").mouseleave(function () {
            $("#more").stop().slideUp()
        })
    })

    window.onscroll =function(){
        if(getScroll().scrollTop>450){
            animate(pic_1,{"opacity":1,"right":85})
        }
        if(getScroll().scrollTop>1100){
            animate(pic_2,{"opacity":1,"left":0})
        }
        if(getScroll().scrollTop>1600){
            animate(pic_3,{"opacity":1,"right":85})
        }
        if(getScroll().scrollTop>1980){
            animate(pic_4,{"opacity":1,"left":0})
        }

    }


</script>
</body>
</html>